<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       {{msg}}
       <span> vuex-store-count:{{this.$store.state.count}}</span>
       <span> vuex-store-computedCount:{{this.$store.getters.computedCount}}</span>
       <br>
       <button @click="increCount()">增加数量</button>
        
    </div>
</template>


<script>
    // vuex的使用1. 引入store
    import store from '../vuex/store.js';

    // vuex的使用2. 注册
    export default{
        data(){
            return {               
               msg:'我是一个home组件'
             
            }
        },
        store,
        methods:{
            increCount(){
                //改变vuex store里的数据
                // this.$store.commit('incCount');/*触发mutations改变state里的数据*/
                this.$store.dispatch('incMutationsCount'); /*触发actions里的方法,actions再调mutations里的方法. 和上面的可以实现相同的效果*/
            }
        }
    }

</script>

<style lang="scss" scoped>
    
</style>